/**
 * 首页：
 * 进入首页界面=>调用首页接口，获取数据
 *            =>渲染数据到相应区域
 */

/**
 * 调用首页接口，获取接口数据
 */
 function loadMainData() {
    $.ajax({
        url: "http://www.xiongmaoyouxuan.com/api/tab/1",
        type: "get",
        headers: {
            'x-platform': 'pc'
        },
        success: function (result) {
            if (result.code === 200) {
                // 轮播效果
                let banners = result.data.banners
                console.log(banners)
                // 商品列表数据
                let productList = result.data.items.list
                console.log(productList)
                showProductList(productList)
            }
        }
    })
}

/**
 * 首页商品列表渲染
 */
// let list=[]
function showProductList(productList) {
    // list=[...list,...productList]
    //1.定义模板，在html页面创建
    //2.设置数据
    let data = {
        // productList:list
        productList
    }

    //3.渲染模板数据=>html代码  
    let htmlTxt = template("shouye", data)

    //4.html代码设置给相应的元素显示
    // $('.productList-ul').html(htmlTxt)
    $('.productList-ul').append(htmlTxt)

    loadMore()
}

/**
 * 加载商品列表数据
 */
function loadProductList(pageNo) {
    $.ajax({
        url: "http://www.xiongmaoyouxuan.com/api/tab/1/feeds",
        type: "get",
        data: {
            start: pageNo * 20
        },
        success: function (result) {
            if (result.code == 200) {
                let productList = result.data.list

                // 2.渲染商品列表数据
                showProductList(productList)

            }
        }
    })
}

/**
 * 加载更多
 */
function loadMore() {
    let pageNo = 0 //页号
    $('.viewMoreBtn').on('click', function () {
        // 1.调用商品列表借口，获取商品列表数据
        loadProductList(++pageNo)
        // 2.渲染商品列表数据=>loadProductList()
    })
}

/**
 * 商品详情页：
 * 1.点击商品，跳转到该商品的商品详情页；
 * 2.需获取该商品id；
 */
function onProductDetail(id) {
    alert(id)
    location.href = "./detail.html?id=" + id
}


/**
 * 回到顶部
 */
function onBackTop() {
    //首先将#btn隐藏
    $("#backToTopBtn").hide()
    //当滚动条的位置处于距顶部50像素以下时，跳转链接出现，否则消失
    $(function () {
        $(window).scroll(function () {
            if ($(window).scrollTop() > 100) {
                $("#backToTopBtn").fadeIn(200)
            } else {
                $("#backToTopBtn").fadeOut(200)
            }
        })
        //当点击跳转链接后，回到页面顶部位置
        $("#backToTopBtn").click(function () {
            $('body,html').animate({
                    scrollTop: 0
                },
                500)
            return false;
        })
    })

}

loadMainData()
onBackTop()




//首先将#btn隐藏
$("#btn").hide();
//当滚动条的位置处于距顶部50像素以下时，跳转链接出现，否则消失
$(function () {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 50) {
            $("#btn").fadeIn(200);
        } else {
            $("#btn").fadeOut(200);
        }
    });
    //当点击跳转链接后，回到页面顶部位置
    $("#btn").click(function () {
        $('body,html').animate({
                scrollTop: 0
            },
            500);
        return false;
    });
});